<!--  Copyright 2020 Zhejiang Lab and Zhejiang University. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* =============================================================
-->

<template>
  <div>
    <b-table
      striped
      hover
      responsive
      :items="datasets"
      :fields="fields"
      :current-page="currentPage"
      :per-page="perPage"
      outlined
      sort-by="created_time"
    >
      <template v-slot:cell(method)="row">
        <div style="white-space: nowrap">
          <b-button
            size="sm"
            @click="download(row.item.url)"
            variant="outline-primary"
            :style="style.methodBtn"
          >下载</b-button>
          <b-button
            size="sm"
            @click="shareData({file_id: row.item.id, file_type: 'd', is_public: row.item.is_public})"
            :variant="row.item.is_possessed?'outline-primary': 'outline-secondary'"
            :disabled="!row.item.is_possessed"
            :style="style.methodBtn"
          >分享</b-button>
          <b-button
            size="sm"
            @click="deleteDatasets([row.item.id])"
            :variant="row.item.is_possessed?'outline-danger': 'outline-secondary'"
            :disabled="!row.item.is_possessed"
            :style="style.methodBtn"
          >删除</b-button>
          <b-button
            size="sm"
            @click="openUpdatePage(row.item.id, row.item.is_public, row.item.dataset_name)"
            :variant="row.item.is_possessed?'outline-danger': 'outline-secondary'"
            :disabled="!row.item.is_possessed"
            :style="style.methodBtn"
          >更新</b-button>
        </div>
      </template>
      <!-- <template v-slot:row-details="row">
        <b-card>{{row.item.note}}</b-card>
      </template>-->
    </b-table>
    <b-pagination
      v-model="currentPage"
      :total-rows="datasets.length"
      :per-page="perPage"
      align="right"
      :style="style.pagination"
    ></b-pagination>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { download } from "../store/utils";

export default {
  name: "MyDatasets",
  data() {
    return {
      perPage: 8,
      currentPage: 1,
      fields: [
        {
          key: "dataset_name",
          label: "名称",
          sortable: true,
          class: "text-center"
        },
        {
          key: "is_public",
          label: "公开",
          sortable: true,
          class: "text-center"
        },
        {
          key: "created_time",
          label: "创建时间",
          sortable: true,
          class: "text-center",
          sortDirection: "asc"
        },
        {
          key: "method",
          label: "操作",
          class: "text-center table-method",
          stickyColumn: true
        }
      ],
      isEditing: false,
      style: {
        pagination: {
          marginTop: "20px"
        },
        submitBtn: {
          marginBottom: "20px"
        },
        methodBtn: {
          marginLeft: "5px",
          marginRight: "5px"
        }
      }
    };
  },
  computed: {
    ...mapState("dataset", {
      errors: state => state.errors,
      datasets: state => state.my_datasets
    })
  },
  methods: {
    ...mapActions("dataset", ["deleteDatasets", "shareData"]),
    openUpdatePage: function(dataset_id, is_public, dataset_name) {
      let routeData = this.$router.resolve({
        name: "Update_Dataset",
        params: {
          dataset_id: dataset_id,
          is_public: is_public,
          dataset_name: dataset_name
        }
      });
      window.open(routeData.href, "_blank");
    },
    download
  },
  mounted() {
    this.$store.dispatch("dataset/getMyDatasets");
  }
};
</script>

<style scoped>
.table-method {
  max-width: 8.8rem;
  text-align: left;
}
</style>